<template>
  <com-card>
    <div slot="com_header">标题</div>
    <div slot="com_con">
      <el-table
        ref="multipleTable"
        :data="usersData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="75"> </el-table-column>
        <!-- <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column> -->
        <el-table-column label="姓名" width="120">
            <template slot-scope="{row}">
              <div v-if="row.isEdit">
                <el-input size="small" v-model="row.account"></el-input>
              </div>
              <div v-else>{{row.account}}</div>
            </template>
        </el-table-column>
        <el-table-column label="用户组" >
                  <template slot-scope="{row}">
                    <div v-if="row.isEdit">
                      <el-select  size="small" name="" id="" v-model="row.userGroup">
                        <el-option value="普通用户">普通用户</el-option>
                        <el-option value="超级管理员">超级管理员</el-option>
                      </el-select>
                    </div>
                    <div v-else>{{row.userGroup}}</div>
                  </template>
        </el-table-column>
        <!-- <el-table-column prop="ctime" label="创建时间"> </el-table-column> -->
        <el-table-column label="创建时间" width="200px">
          <template slot-scope="scope">
            {{ scope.row.ctime | timeMF }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button :type="row.isEdit?'primary':'warning'" size="small" @click="xg(row)"
              >{{row.isEdit?'完成':'编辑'}}</el-button
            >
            <!-- <el-button type="danger" @click="del(scope.$index)">删除</el-button> -->
            <el-button type="danger" size="small" @click="del(row.id)"
              >删除</el-button
            >
            <!-- <el-button type="default" @click="xg(scope.$index)">编辑</el-button>
            <el-button type="danger" @click="del(scope.$index)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-button type="danger" size="small" @click="delall">批量删除</el-button>
      <el-row>
        <!-- 
          @size-change： 每页显示的数据条数发生变化时触发的函数
          @current-change：当前页码变化时触发的事件
          :current-page:当前的页码值
          :page-sizes:下拉框中条数的选项
          :page-size:每一页显示的数据的条数值
          layout:可选的工具布局
          
         -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchObj.currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="searchObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
      <!-- <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])"
          >切换第二、第三行的选中状态</el-button
        >
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div> -->
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/card";
import { api_query, api_delall, api_del,api_update } from "../../api/users.js";
export default {
  components: {
    ComCard,
  },
  data() {
    return {
      total: 0,
     
      //定义接口需要的参数对象
      searchObj: {
        currentPage: 1,
        pageSize: 2,
        id: "",
      },
      usersData: [
        // {
        //   id: 38,
        //   ctime: "2020-05-18T22:48:00.000Z",
        //   account: "aaa",
        //   userGroup: "超级管理员",
        //   imgUrl: "default.jpg",
        // },
        // {
        //   id: 38,
        //   ctime: "2020-05-18T22:48:11.000Z",
        //   account: "bbb",
        //   userGroup: "超级管理员",
        //   imgUrl: "default.jpg",
        // },
        // {
        //   id: 38,
        //   ctime: "2020-05-18T22:48:22.000Z",
        //   account: "ccc",
        //   userGroup: "超级管理员",
        //   imgUrl: "default.jpg",
        // },
        // {
        //   id: 38,
        //   ctime: "2020-05-18T22:48:33.000Z",
        //   account: "ddd",
        //   userGroup: "超级管理员",
        //   imgUrl: "default.jpg",
        // },
      ],

      // 记录被选中行的数据
      multipleSelection: [],
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    //定义查询数据的函数
    async query() {
      let rst = await api_query(this.searchObj);
      console.log(rst);
      let { data, total } = rst;
      data=data.map((item)=>{
         item.isEdit=false
         return item
      })
      this.usersData = data;
      this.total = total;
      console.log(this.usersData);
    },

    //数据条数变化时触发
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.query();
    },
    // 页码变化时触发
    handleCurrentChange(val) {
      this.searchObj.currentPage = val;
      this.query();
    },

    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach((row) => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },

    async del(id) {
      let rstt = await api_del({ id });
      console.log(rstt);
      this.query();
    },
    // async del(a) {
    //   // this.usersData.splice(a.$index, 1);
    //   let rst = await api_query(this.searchObj);
    //   // console.log(rst.data);
    //   let { id } = rst.data[a];
    //   this.searchObj.id = id;
    //   let rstt = await api_del(this.searchObj);
    //   console.log(rstt);
    //   this.query();
    // },
   async xg(row) {
      if(row.isEdit){
      let rst=await  api_update({id:row.id,account:row.account,userGroup:row.userGroup})
      let {msg,code}=rst;
      if(code==0){
        this.$message.success(msg)
      }
      console.log(rst);
      }
      
      row.isEdit=!row.isEdit
    },

    async delall() {
      // let ids = [];
      // this.multipleSelection.forEach((item)=>{
      //   ids.push(item.id)
      // })
      let ids = this.multipleSelection.map((item) => {
        return item.id;
      });
      ids = JSON.stringify(ids);
      // let idss = `[${ids}]`
      let rst = await api_delall({ ids });
      console.log(rst);
      console.log(JSON.stringify(ids));
      this.query();
    },
  },
};
</script>

<style lang="less" scoped>
</style>